<template>
    <div>
        <Position :navList="navList"/>
        <div class="user">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="ID" width="180"></el-table-column>
                <el-table-column prop="name" label="Openid"></el-table-column>
                <el-table-column prop="address" label="微信昵称"></el-table-column>
                <el-table-column prop="address" label="微信头像"></el-table-column>
                <el-table-column prop="address" label="手机号"></el-table-column>
                <el-table-column prop="address" label="创建时间"></el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100]"
                :page-size="10"
                layout="sizes, prev, pager, next"
                :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import Position from '../components/position.vue'
export default {
    components:{
        Position
    },
    data(){
        return{
            navList:[{
                name:'用户列表',
                url:''
            }],
            tableData:[],
            total:0,//总条目数
        }
    },
    mounted(){

    },
    methods:{
        //页面展示数据数量变化时
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        //翻页时
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>
<style lang="scss" scoped>
    .user{
        padding: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        background-color: #fff;
        
    }
</style>